<template>
    <div>
        <crumbs></crumbs>
        <h1>学生成绩分析</h1>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formInline.id" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
            <div class="examAnalysis">
                <p style="text-align:left;font-size:20px;font-weight: 700;">学生姓名：{{this.formInline.name}}</p>
                <el-row>
                    <el-col :span="8">
                        <div id="main" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="chineseCharts" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="mathCharts" style="width: 100%; height: 100%"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div id="englishCharts" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="lizongCharts" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="wenzongCharts" style="width: 100%; height: 100%"></div>
                    </el-col>
                </el-row>
        </div>
    </div>
</template>

<script>
import {entry_analysis,mid_analysis,end_analysis} from '@/utils/examAnalysis.js';
import {stacked,basisLine} from '@/utils/echarts.js';
    export default {
        data(){
            return{
                formInline: {
                    result:[],
                    id: '',
                    input:'',
                    name:'',
                    flag:false
                },
            }
        },
        mounted(){
            this.getMainChart();
            
        },
        methods:{
            getMainChart(){
            },
            async onSubmit(){
                let entry_result = await entry_analysis(this.formInline.id);
                let mid_result = await mid_analysis(this.formInline.id);
                let end_result = await end_analysis(this.formInline.id);
                this.formInline.name = entry_result[0].stu_name;
                console.log(entry_result[0],mid_result[0],end_result[0]);//{},{},{}
                let subject =  ["chinese", "english", "math", "lizong", "wenzong"];
                let entryData = [];
                let midData = [];
                let endData = [];
                for(let i = 0;i < subject.length;i++){
                    getGradeData(subject[i],entry_result[0],entryData);
                    getGradeData(subject[i],mid_result[0],midData);
                    getGradeData(subject[i],end_result[0],endData);
                }
                function getGradeData(ExamItem,ExamData,scoreData){
                    //ExamItem:["chinese", "english", "math", "lizong", "wenzong"]
                    //ExamData:Ajax得到结果
                    //scoreData：空数组
                    for(let k in ExamData){
                        if(k == ExamItem){
                            scoreData.push(ExamData[k]);
                        }
                    }
                }
                console.log(entryData,midData,endData);
                stacked(this,'main','成绩分析表',entryData,midData,endData);
                function score(that,myChartId,title,getEntryExam,getMidExam,getEndExam,item){
                    let CourseSubjects = [];//CourseSubjects用来存放同一学科的三次成绩
                    CourseSubjects.push(getEntryExam[item]);
                    CourseSubjects.push(getMidExam[item]);
                    CourseSubjects.push(getEndExam[item]);
                    basisLine(that,myChartId,title,CourseSubjects);
                }
                score(this,'chineseCharts','语文',entry_result[0],mid_result[0],end_result[0],'chinese');
                score(this,'mathCharts','数学',entry_result[0],mid_result[0],end_result[0],'math');
                score(this,'englishCharts','英语',entry_result[0],mid_result[0],end_result[0],'english');
                score(this,'lizongCharts','理综',entry_result[0],mid_result[0],end_result[0],'lizong');
                score(this,'wenzongCharts','文综',entry_result[0],mid_result[0],end_result[0],'wenzong');
            }
        },
    }
</script>

<style lang="scss" scoped>
h1{
    font-size:20px;
}
.examAnalysis {
    div {
        height: 300px;
    }
}
</style>